import { _decorator, Component, Node, Sprite, SpriteFrame, Slider, ProgressBar, color } from 'cc';
import { BaseView } from '../rxjs/cc3/BaseView';
import { BindSlider } from '../rxjs/cc3/BindSlider';
import { ReactiveProperty } from '../rxjs/cc3/ReactiveProperty';
const { ccclass, property } = _decorator;

const _color_blue = color().fromHEX('#1C9EFD');
const _color_red = color().fromHEX('#AF6E6E');

@ccclass('SliderStyle1')
export class SliderStyle1 extends BaseView {

    @property
    step = 10;

    stepValue = ReactiveProperty.Create<number>(null);

    @property(ProgressBar)
    barProgressBar: ProgressBar = null;

    @property(Sprite)
    handleSprite: Sprite = null;

    @property([SpriteFrame])
    handleSpriteFrames: SpriteFrame[] = [];

    _slider: Slider = null;

    sliderEnabled = ReactiveProperty.Create<boolean>(true);

    willBind(): void {
        this._slider = this.getComponent(Slider);
        // this.stepValue.value = this._slider.progress;
    }

    useObserves() {
        return [
            BindSlider(this._slider).subscribe(_ => {
                this.setProgress(this._slider.progress);
                this._slider.progress = Math.round((this._slider.progress) * this.step) / this.step;
                this.stepValue.value = this._slider.progress;
            }),
            this.sliderEnabled.subscribe(_ => {
                this.barProgressBar.getComponent(Sprite).color = _ ? _color_blue : _color_red;
            })
        ];
    }

    setProgress(progress: number) {
        if (this._slider == null) this._slider = this.getComponent(Slider);
        this._slider.progress = progress;
        if (this._slider.progress <= 0) this.handleSprite.spriteFrame = this.handleSpriteFrames[0];
        else this.handleSprite.spriteFrame = this.handleSpriteFrames[1];
        this.barProgressBar.progress = this._slider.progress;
    }

}


